<div class="subheader editor-toolbar" id="editor-header">
  <div class="fixed-container">
    <div class="btn-group">
      <div class="btn-toolbar pull-left" ng-cloak ng-controller="DecisionTableToolbarController">
        <button class="btn btn-inverse" dec
                id="{{item.id}}"
                ng-class="{'separator': item.type == 'separator'}"
                ng-click="toolbarButtonClicked($index)"
                ng-disabled="item.type == 'separator' || item.enabled == false || (readOnly && item.disableOnReadonly)"
                ng-repeat="item in items" ng-switch
                on="item.type"
                title="{{item.title | translate}}">
          <i class="toolbar-button" data-toggle="tooltip" ng-class="item.cssClass" ng-switch-when="button"
             title="{{item.title | translate}}"></i>
          <div ng-class="item.cssClass" ng-switch-when="separator"></div>
        </button>
      </div>
    </div>
    <div class="btn-group pull-right" ng-show="!secondaryItems.length">
      <div class="btn-toolbar pull-right" ng-controller="DecisionTableToolbarController">
        <button class="btn btn-inverse" id="{{item.id}}" ng-class="{'separator': item.type == 'separator'}"
                ng-click="toolbarSecondaryButtonClicked($index)"
                ng-disabled="item.type == 'separator' || (readOnly && item.disableOnReadonly)"
                ng-repeat="item in secondaryItems"
                ng-switch
                on="item.type" title="{{item.title | translate}}">
          <i class="toolbar-button" data-toggle="tooltip" ng-class="item.cssClass" ng-switch-when="button"
             title="{{item.title | translate}}"></i>
          <div ng-class="item.cssClass" ng-switch-when="separator"></div>
        </button>
      </div>
    </div>
  </div>
</div>

<div auto-height class="container-fluid content decision-table" offset="40">

  <br/>

  <div class="row">
    <div class="col-xs-12 text-right">
      <div class="dropdown">
        <button aria-expanded="true" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                id="actionsMenu" type="button">
          {{"DECISION-TABLE-EDITOR.BUTTON-ACTIONS-LABEL" | translate}}
          <span class="caret"></span>
        </button>
        <ul aria-labelledby="actionsMenu" class="dropdown-menu dropdown-menu-right">
          <li><a href ng-click="addRule()">{{"DECISION-TABLE-EDITOR.BUTTON-ADD-RULE-LABEL" | translate}}</a></li>
          <li ng-if="model.selectedRow !== undefined && model.rulesData.length >= 2 && model.selectedRow >= 1"><a href
                                                                                                                  ng-click="moveRuleUpwards()">{{"DECISION-TABLE-EDITOR.BUTTON-MOVE-RULE-UPWARDS-LABEL"
            | translate}}</a></li>
          <li ng-if="model.selectedRow !== undefined && model.selectedRow !== model.rulesData.length - 1"><a href
                                                                                                             ng-click="moveRuleDownwards()">{{"DECISION-TABLE-EDITOR.BUTTON-MOVE-RULE-DOWNWARDS-LABEL"
            | translate}}</a></li>
          <li class="danger" ng-if="model.selectedRow !== undefined &&  model.rulesData.length > 1"><a href
                                                                                                       ng-click="removeRule()">{{"DECISION-TABLE-EDITOR.BUTTON-REMOVE-RULE-LABEL"
            | translate}}</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="decision-table-grid-wrapper" id="decisionTableGrid">
    <div class="decision-name-container">
      <div class="decision-name">
        {{currentDecisionTable.name}}
      </div>
    </div>
    <hot-table auto-row-size="'true'"
               columns="model.columnDefs"
               current-row-class-name="'currentRow'"
               datarows="model.rulesData"
               height="500"
               hot-auto-destroy
               hot-id="decision-table-editor"
               on-after-get-col-header=doAfterGetColHeader
               on-after-on-cell-mouse-down=doAfterOnCellMouseDown
               on-after-render=doAfterRender
               on-after-scroll-horizontally=doAfterScroll
               on-after-scroll-vertically=doAfterScroll
               on-after-validate=doAfterValidate
               on-modify-col-width=doAfterModifyColWidth
               row-headers="true"
               settings="model.hotSettings">
    </hot-table>
  </div>
</div>

<script>
    function triggerExpressionEditor(expressionType, expressionPos, newExpression) {
        if (expressionType === 'input') {
            extScope.openInputExpressionEditor(expressionPos, newExpression);
        } else {
            extScope.openOutputExpressionEditor(expressionPos, newExpression);
        }
    }

    function triggerRemoveExpression(expressionType, expressionPos) {
        if (expressionType === 'input') {
            extScope.removeInputExpression(expressionPos);
        } else {
            extScope.removeOutputExpression(expressionPos);
        }
    }

    function triggerHitPolicyEditor() {
        extScope.openHitPolicyEditor();
    }
</script>
